<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="checkbox" @change="handleChange" v-model="isAllChecked">
        <ul>
            <li v-for="data in datalist">
                <input type="checkbox" v-model="checkgroup" :value="data" @change="handleOneChange">
                {{data}}
                <button @click="handleDel(data)">del</button>
                {{data.number}}
                <button @click="data.number++">add</button>
            </li>
        </ul>
        {{checkgroup}}
        <p>总金额计算:{{ getSum() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#box",
            data:{
                checkgroup:[],
                isAllChecked:false,
                datalist:[
                    {
                        name:"商品1",
                        price:10,
                        number:1,
                        id:"1"
                    },
                    {
                        name:"商品2",
                        price:15,
                        number:2,
                        id:"2"
                    },
                    {
                        name:"商品3",
                        price:30,
                        number:4,
                        id:"3"
                    }
                ]
            },
            methods:{
                getSum(){
                    var sum = 0;
                    this.checkgroup.map(item=> sum+=item.price*item.number);
                    return sum;
                },
                handleChange(){
                    if(this.isAllChecked){
                        this.checkgroup = this.datalist;
                    }else{
                        this.checkgroup = [];
                    }
                },
                handleOneChange(){
                    if(this.checkgroup.length == this.datalist.length){
                        this.isAllChecked = true;
                    }else{
                        this.isAllChecked = false;
                    }
                },
                handleDel(data){
                    data.number--;
                    if(data.number<=0)data.number = 0;
                }
            }
        })
    </script>
</body>
</html>